<script setup>
import { defineProps } from 'vue';
import useNightModeStore from "@/stores/nightModeStore"//引入pinia
const nightModeStore=useNightModeStore();//获取pinia仓库对象
const props=defineProps({
    storyList:Array
});

</script>
<template>
<ul :class="['list', nightModeStore.isNight?'night':'']">
    <li v-for="item in props.storyList" :key="item.id">
        <template v-if="item.showtime">
            <!-- /*分割线*/ -->
            <div class="timeline"> 
                <span>{{ item.timeline }}</span>
            </div>

        </template>
        <template v-else>
            <RouterLink class="left" :to="`/detail/${item.id}`">
            <h5>{{item.title}}</h5>
            <span>{{item.hint}}</span>
    </RouterLink>
<RouterLink  :to="`/detail/${item.id}`">
    <img :src="item.images[0]"/>
</RouterLink>
        </template>  
    </li>
</ul>
</template>
<style scoped>
.timeline{
    color: #acabab;
    position: relative;
    width: 100%;
}
.timeline::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    border-top: 2px solid #aaa;
}
.timeline>span{
    padding: 0px 5px;
    position: absolute;
    left: 50%;
    top:-10px;
    background-color: #fff;
    transform: translateX(-50%);
}
.list.night{
    background-color: #555;
    color: white;
}
.list.night .left{
    color: #fff;
}
.list>li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}
.list .left{
    color: black;
}

.list .left h5{
    font-weight: normal;
    font-family: "微软雅黑";
    font-size: 16px;

}
.list .left span{
    display:inline-block;
    padding-top: 10px;
    font-size: 13px;
    color: #ababab;
}

.list img{
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin-left: 15px;
}
</style>